<template>
  <div>
    <el-row style="margin-left: -10px; margin-right: -10px">
      <el-col :span="12" style="padding-left: 10px; padding-right: 10px">
        <div class="box user-task-stats-chart bgc1">
          <div class="header">
            <div class="title">运营人员（当天）</div>
          </div>
          <div class="body">
            <div class="stats">
              <div class="item">
                <div class="num color1 text-shadow1">{{ business.total }}</div>
                <div class="text color2">工单总数（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num color1 text-shadow1">
                  {{ business.completedTotal }}
                </div>
                <div class="text color2">完成工单（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num color1 text-shadow1">
                  {{ business.cancelTotal }}
                </div>
                <div class="text color2">拒绝工单（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num color1 text-shadow1">
                  {{ business.workerCount }}
                </div>
                <div class="text color2">运营人员数（个）</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12" style="padding-left: 10px; padding-right: 10px">
        <div class="box user-task-stats-chart bgc2">
          <div class="header">
            <div class="title">运维人员（当天）</div>
          </div>
          <div class="body">
            <div class="stats">
              <div class="item">
                <div class="num color3 text-shadow2">{{ operation.total }}</div>
                <div class="text color4">工单总数（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num color3 text-shadow2">
                  {{ operation.completedTotal }}
                </div>
                <div class="text color4">完成工单（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num color3 text-shadow2">
                  {{ operation.cancelTotal }}
                </div>
                <div class="text color4">拒绝工单（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num color3 text-shadow2">
                  {{ operation.workerCount }}
                </div>
                <div class="text color4">运维人员数（个）</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-left: -10px; margin-right: -10px">
      <el-col :span="18" style="padding-left: 10px; padding-right: 10px">
        <div class="box user-task-status">
          <div class="header">
            <div class="title">工单状态</div>
            <el-date-picker
              v-model="date"
              size="small"
              type="daterange"
              range-separator="~"
              value-format="yyyy-MM-dd"
              :picker-options="{
                disabledDate(date) {
                  return date && date > new Date();
                },
              }"
              class="date-picker"
            />
            <div class="week-month-year">
              <div
                class="item"
                :class="{ 'is-checked': dataType === 'week' }"
                @click="checkType('week')"
              >
                周
              </div>
              <div
                class="item"
                :class="{ 'is-checked': dataType === 'month' }"
                @click="checkType('month')"
              >
                月
              </div>
              <div
                class="item"
                :class="{ 'is-checked': dataType === 'year' }"
                @click="checkType('year')"
              >
                年
              </div>
            </div>
          </div>
          <div class="charts">
            <div class="chart">
              <div
                id="user-task-status-bar-chart"
                class="hidden"
                style="
                  height: 100%;
                  width: 100%;
                  -webkit-tap-highlight-color: transparent;
                  user-select: none;
                  position: relative;
                "
              />
              <div class="empty show">
                <img src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png">
                <div class="tips">暂无数据</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
        <div class="box bgc3 user-task-rank">
          <div class="header">
            <div class="title">
              人效排名（月度）
            </div>
            <el-select v-model="regionId" placeholder="请选择" size="small" class="regions" @change="getUserWorkTop10">
              <el-option
                v-for="item in regionList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="role-group">
            <div class="role-list">
              <div class="item" :class="{'is-checked': !isRepair}" @click="isRepair = false">
                运营人员
              </div>
              <div class="item" :class="{'is-checked':isRepair}" @click="isRepair = true">
                运维人员
              </div>
            </div>
          </div>
          <div v-if="top10List.length" class="body less10">
            <el-row v-for="item,index in top10List" :key="index" class="item">
              <el-col :span="5">
                <div class="top" :class="[`top${index+1}`]">
                  1
                </div>
              </el-col>
              <el-col :span="13" class="user-name">{{ item.userName }}</el-col>
              <el-col :span="6" class="work-count">{{ item.workCount }}单</el-col>
            </el-row>
          </div>
          <div v-else class="empty">
            <img src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png">
            <div class="tips">暂无数据</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getTaskReportInfo, getUserWorkTop10 } from '@/api/task'
import { searchRegionList } from '@/api/vm'
export default {
  data() {
    return {
      business: {}, // 运营
      operation: {}, // 运维
      date: [],
      dataType: 'week',
      searchForm: {
        pageIndex: 1,
        pageSize: 100000,
        name: null
      },
      regionList: [],
      isRepair: false,
      regionId: 0,
      top10List: []
    }
  },
  computed: {
    today() {
      // 获取当前日期字符串
      return new Date()
        .toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
    },
    firstDayOfMonth() {
      const today = new Date()
      // 获取本月第一天字符串
      return new Date(today.getFullYear(), today.getMonth(), 1)
        .toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
    },
    firstDayOfWeek() {
      const today = new Date()
      const dayOfWeek = today.getDay()
      const daysToMonday = (7 - dayOfWeek) % 7
      // 获取本周第一天字符串
      return new Date(today.setDate(today.getDate() + daysToMonday - 6))
        .toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
    },
    firstDayOfYear() {
      const today = new Date()
      // 获取本年第一天字符串
      return new Date(today.getFullYear(), 0, 1)
        .toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
    },
    startDate() {
      switch (this.dataType) {
        case 'week':
          return this.firstDayOfWeek
        case 'month':
          return this.firstDayOfMonth
        default:
          return this.firstDayOfYear
      }
    }
  },
  watch: {
    isRepair: {
      handler() {
        this.getUserWorkTop10()
      }
    }
  },
  created() {
    this.getTaskReportInfo()
    this.date = [this.startDate, this.today]
    this.searchRegionList()
    this.getUserWorkTop10()
  },
  methods: {
    checkType(type) {
      this.dataType = type
      this.date = [this.startDate, this.today]
      // this.initCharts()
    },
    async getTaskReportInfo() {
      const res = await getTaskReportInfo(
        this.today + ' 00:00:00',
        this.today + ' 23:59:59'
      )
      this.business = res.find((item) => !item.repair)
      this.operation = res.find((item) => item.repair)
    },
    async searchRegionList() {
      const { currentPageRecords } = await searchRegionList({ ...this.searchForm })
      this.regionList = [{ id: 0, name: '全部' }, ...currentPageRecords]
    },
    async getUserWorkTop10() {
      this.top10List = await getUserWorkTop10(this.firstDayOfMonth, this.today, this.isRepair, this.regionId)
    }
  }
}
</script>

<style lang="scss" scoped>
.user-task-stats-chart {
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  height: calc(25vh - 30px);
  min-height: 166px;
}

.user-task-stats-chart .body .stats,
.user-task-stats-chart .body {
  -webkit-box-flex: 1;
  flex: 1 1 0%;
  display: flex;
}

.user-task-stats-chart .body .stats {
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}

.user-task-stats-chart .body .stats .item {
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

.user-task-stats-chart .body .stats .item .num {
  height: 50px;
  font-size: 36px;
  font-family: PingFangSC-Semibold, "PingFang SC";
  font-weight: 600;
  line-height: 50px;
  text-shadow: rgba(85, 132, 255, 0.5) 2px 4px 7px;
}

.user-task-stats-chart .body .stats .item .text {
  height: 17px;
  margin-top: 3px;
  font-size: 12px;
  font-family: PingFangSC-Regular, "PingFang SC";
  font-weight: 400;
  color: rgb(145, 167, 220);
  line-height: 17px;
}

.user-task-stats-chart .body .stats .item .color1 {
  color: rgb(7, 32, 116);
}

.user-task-stats-chart .body .stats .item .color2 {
  color: rgb(145, 167, 220);
}

.user-task-stats-chart .body .stats .item .color3 {
  color: rgb(255, 87, 87);
}

.user-task-stats-chart .body .stats .item .color4 {
  color: rgb(222, 150, 144);
}

.user-task-stats-chart .body .stats .item .text-shadow1 {
  text-shadow: rgba(85, 132, 255, 0.5) 2px 4px 7px;
}

.user-task-stats-chart .body .stats .item .text-shadow2 {
  text-shadow: rgba(255, 99, 85, 0.5) 2px 4px 7px;
}

.bgc1 {
  background-color: rgb(233, 243, 255);
  background-image: url(""),
    url("");
  background-repeat: no-repeat, no-repeat;
  background-position: 0px 0px, calc(100% - 12px) 100%;
}

.bgc2 {
  background: url("https://likede2-admin.itheima.net/img/operation.4120cc58.png")
    calc(100% - 12px) 100% no-repeat rgb(251, 239, 232);
}

.chart {
  position: relative;
  width: 100%;
  height: 100%;
}

.show {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

.user-task-status {
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  height: calc(75vh - 90px);
  min-height: 542px;
  margin-top: 20px;
  background: rgb(255, 255, 255);
}

.user-task-status .charts {
  -webkit-box-flex: 1;
  flex: 1 1 0%;
  display: flex;
}

.user-task-rank {
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  height: calc(75vh - 90px);
  min-height: 542px;
  margin-top: 20px;
  background: rgb(255, 255, 255);
}

.user-task-rank .regions {
  width: 88px;
}

.user-task-rank .role-group {
  width: 177px;
  margin: 15px auto 0px;
}

.user-task-rank .role-group .role-list {
  height: 34px;
  background: rgba(233, 243, 255, 0.37);
  border-radius: 10px;
}

.user-task-rank .role-group .role-list .item,
.user-task-rank .role-group .role-list {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}

.user-task-rank .role-group .role-list .item {
  width: 78px;
  height: 25px;
  font-size: 14px;
  color: rgb(156, 163, 180);
  cursor: pointer;
}

.user-task-rank .role-group .role-list .is-checked {
  background: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.11) 0px 0px 4px 0px;
  border-radius: 7px;
  font-weight: 600;
  color: rgb(51, 51, 51);
}

.user-task-rank .body {
  -webkit-box-flex: 1;
  flex: 1 1 0%;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin-top: 20px;
}

.user-task-rank .body .top {
  display: inline-block;
  width: 16px;
  height: 20px;
  margin-left: 10px;
  background: url("");
  text-align: center;
  font-size: 12px;
  font-family: zihun143-zhengkuchaojihei, zihun143;
  font-weight: 400;
  color: rgb(233, 180, 153);
  line-height: 14px;
}

.user-task-rank .body .top1 {
  width: 21px;
  height: 20px;
  background: url("");
  color: rgb(142, 89, 0);
}

.user-task-rank .body .top2 {
  width: 21px;
  height: 20px;
  background: url("");
  color: rgb(73, 73, 73);
}

.user-task-rank .body .top3 {
  width: 21px;
  height: 20px;
  background: url("");
  color: rgb(207, 109, 61);
}

.user-task-rank .body .user-name {
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Medium, "PingFang SC";
  font-weight: 500;
  color: rgb(51, 51, 51);
  line-height: 20px;
}

.user-task-rank .body .work-count {
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, "PingFang SC";
  font-weight: 400;
  color: rgb(115, 117, 137);
  line-height: 20px;
  text-align: right;
}

.user-task-rank .less10 {
  -webkit-box-pack: start;
  justify-content: start;
}

.user-task-rank .less10 .item {
  margin-top: 24px;
}

.user-task-rank .less10 .item:first-child {
  margin-top: 0px;
}

.user-task-rank .empty {
  -webkit-box-flex: 1;
  flex: 1 1 0%;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}

.user-task-rank .empty .tips {
  margin-top: 25px;
  color: rgb(32, 35, 42);
  font-size: 14px;
}

.box {
  padding: 20px;
  border-radius: 20px;
}

.box .header,
.box .header .title {
  display: flex;
}

.box .header .title {
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  flex: 1 1 0%;
  font-size: 16px;
  font-family: PingFangSC-Semibold, "PingFang SC";
  font-weight: 600;
  color: rgb(51, 51, 51);
}

.box .header .sub-title {
  margin-left: 10px;
  font-size: 12px;
  font-family: PingFangSC-Regular, "PingFang SC";
  font-weight: 400;
  color: rgb(153, 153, 153);
}

.box .header .date-picker {
  width: 230px;
  margin-right: 21px;
}
.week-month-year {
  width: 129px;
  height: 34px;
  background: rgba(233, 243, 255, 0.37);
  border-radius: 10px;
}

.week-month-year .item,
.week-month-year {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.week-month-year .item {
  width: 37px;
  height: 25px;
  font-size: 14px;
  color: #9ca3b4;
  cursor: pointer;
}

.week-month-year .is-checked {
  background: #fff;
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
  border-radius: 7px;
  font-weight: 600;
  color: #333;
}

.chart .empty {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.chart .empty .tips {
    margin-top: 25px;
    color: #20232a;
    font-size: 14px
}

.show {
    visibility:visible;
}

.hidden {
    visibility: hidden
}

</style>
